<template>
  <div style="text-align: left">
    <a-button type="primary" @click="pushArticle">
      发布文章
    </a-button>
    <a-list
      itemLayout="horizontal"
      :dataSource="article_list"
    >
      <a-list-item slot="renderItem" slot-scope="item, index">
        <a-list-item-meta
          :description="item.description"
        >
          <a slot="title" @click="$router.push({name: 'Article', params: {user_name: item.name, article_id: item.article_id}})">{{item.title}}</a>
          <a-avatar slot="avatar" :src="item.avatar" />
        </a-list-item-meta>
        <div>{{item.create_time}}</div>
      </a-list-item>
    </a-list>
  </div>
</template>

<script>
import ossConfig from '@/plugin/oss'
const ossClient = new OSS.Wrapper(ossConfig)
export default {
  name: 'HomePage',
  data () {
    return {
      article_list: []
    }
  },
  created () {
    this.getArticles();
  },
  methods: {
    getArticles () {
      this.$axios.get('/article/get_article_list').then(res => {
        let data = res.data;
        if(data.ok){
          this.handleList(data.article_list);
          this.$message.success('请求成功');
        }else{
          this.$message.error('请求列表失败');
        }
      }).catch(err => {
        console.error(err);
        this.$message.error('服务器出错，请稍后重试！');
      });
    },
    handleList (list) {
      this.article_list = list.map(item => Object.assign(item, {
          create_time: new Date(item.create_time*1).format('yyyy-MM-dd hh:mm:ss'),
          avatar: ossClient.signatureUrl(item.avatar)
        })
      );
    },
    pushArticle() {
      this.$router.push({name: 'ArticleAdd'});
    }
  }
}
</script>

<style scoped>
  .ant-list-item-meta{text-align: left;}

</style>
